<template>
  <div class="run-mode-all">
    <div class="run-mode-content">
      <el-card :class="{ 'run-card': true, runClick: mode === 'learning' }" shadow="hover" @click.native="modeChange('learning')">
        <div slot="header" class="run-header study">
          <span>{{$t('学习模式')}}</span>
        </div>
        <div class="run-content">
          {{$t('数据全部放行，不产生日志，用于学习策略。')}}
        </div>
      </el-card>
      <el-card :class="{ 'run-card': true, runClick: mode === 'checking' }" shadow="hover" @click.native="modeChange('checking')">
        <div slot="header" class="run-header finds">
          <span>{{$t('测试模式')}}</span>
        </div>
        <div class="run-content">
          {{$t('除黑名单外数据全部放行，未匹配策略将产生日志。')}}
        </div>
      </el-card>
      <el-card :class="{ 'run-card': true, runClick: mode === 'filter' }" shadow="hover" @click.native="modeChange('filter')">
        <div slot="header" class="run-header manage">
          <span>{{$t('管控模式')}}</span>
        </div>
        <div class="run-content tactics">
          {{$t('策略生效。')}}
        </div>
      </el-card>
    </div>
    <el-divider v-if="['checking', 'learning'].includes(mode)"></el-divider>
    <div>
      <el-card class="run-down-card testMode" shadow="never" v-if="mode === 'checking'">
        <div slot="header" class="run-down-header">
          <span>{{$t('测试模式选项')}}</span>
        </div>
        <div class="run-down-content">
          <div class="text-switch">
            <div :style="'width:' + (lang === 'zh'?'150px;':'280px;')" style="">{{$t('TCP不产生日志提示')}}</div>
            <div>
              <el-switch :width="60" v-model="noList.no_tcp" class="noTcp switch" @change="switchChange('no_tcp', noList.no_tcp)" active-color="#009966" inactive-color="#CCCCCC" :active-value="true" :inactive-value="false" :active-text="$t('ON')" :inactive-text="$t('OFF')">
              </el-switch>
            </div>
          </div>
          <div class="text-switch">
            <div :style="'width:' + (lang === 'zh'?'150px;':'280px;')">{{$t('UDP不产生日志提示')}}</div>
            <div>
              <el-switch :width="60" v-model="noList.no_udp" class="noUdp switch" @change="switchChange('no_udp', noList.no_udp)" active-color="#009966" inactive-color="#CCCCCC" :active-value="true" :inactive-value="false" :active-text="$t('ON')" :inactive-text="$t('OFF')">
              </el-switch>
            </div>
          </div>
          <div class="text-switch">
            <div :style="'width:' + (lang === 'zh'?'150px;':'280px;')">{{$t('组播不产生日志提示')}}</div>
            <div>
              <el-switch :disabled="noList.no_udp" :width="60" v-model="noList.no_multicast" class="noMulticast switch" @change="switchChange('no_multicast', noList.no_multicast)" active-color="#009966" inactive-color="#CCCCCC" :active-value="true" :inactive-value="false" :active-text="$t('ON')" :inactive-text="$t('OFF')">
              </el-switch>
            </div>
          </div>
          <div class="text-switch">
            <div :style="'width:' + (lang === 'zh'?'150px;':'280px;')">{{$t('广播不产生日志提示')}}</div>
            <div>
              <el-switch :disabled="noList.no_udp" :width="60" v-model="noList.no_broadcast" class="noBroadcast switch" @change="switchChange('no_broadcast', noList.no_broadcast)" active-color="#009966" inactive-color="#CCCCCC" :active-value="true" :inactive-value="false" :active-text="$t('ON')" :inactive-text="$t('OFF')">
              </el-switch>
            </div>
          </div>
          <div class="text-switch">
            <div :style="'width:' + (lang === 'zh'?'150px;':'280px;')">{{$t('ICMP不产生日志提示')}}</div>
            <div>
              <el-switch :width="60" v-model="noList.no_icmp" class="noIcmp switch" @change="switchChange('no_icmp', noList.no_icmp)" active-color="#009966" inactive-color="#CCCCCC" :active-value="true" :inactive-value="false" :active-text="$t('ON')" :inactive-text="$t('OFF')">
              </el-switch>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="run-down-card learnMode" shadow="never" v-if="mode === 'learning'">
        <div slot="header" class="run-down-header">
          <span>{{$t('学习模式选项')}}</span>
        </div>
        <div class="run-down-content">
          <div class="text-switch">
            <div :style="lang ==='zh'?'width:150px':'width:180px'">{{$t('深度协议分析')}}</div>
            <div>
              <el-switch :width="lang ==='zh'?60:70" v-model="noList.analysis_status" class="analysisSwitch switch" @change="analysisChange" active-color="#009966" inactive-color="#CCCCCC" active-value="ON" inactive-value="OFF" :active-text="$t('开启')" :inactive-text="$t('关闭')">
              </el-switch>
            </div>
          </div>
          <div class="text-switch">
            <div :style="lang ==='zh'?'width:150px':'width:180px'">{{$t('自学习配置')}}</div>
            <div>
              <el-switch :width="lang ==='zh'?60:70" v-model="noList.assist_status" class="assistSwitch switch" @change="assistChange" active-color="#009966" inactive-color="#CCCCCC" active-value="ON" inactive-value="OFF" :active-text="$t('开启')" :inactive-text="$t('关闭')">
              </el-switch>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <LearnConfigDialog v-if="learnConfigDialogVisible" ref="refLearnConfigDialogVisible" @learn='learnConfigChange'></LearnConfigDialog>
  </div>
</template>
<script>
import { getRunInfo, switchRunMode, switchOpStatus } from '@/api/system/run'
import { setStatus } from '@/api/safe/analysis'
import { setLearnConfig } from '@/api/safe/intellect/learnConfig'
import LearnConfigDialog from '@/pages/Safe/intellect/learnConfig/components/LearnConfigDialog'
export default {
  name: 'Dev',
  components: {
    LearnConfigDialog
  },
  data () {
    return {
      learnConfigDialogVisible: false,
      lang: this.$i18n.locale,
      mode: null,
      noList: {
        analysis_status: 'OFF',
        assist_status: 'OFF',
        no_broadcast: false,
        no_icmp: false,
        no_multicast: false,
        no_tcp: false,
        no_udp: false
      }
    }
  },
  created () {
    this.listData()
  },
  methods: {
    listData () {
      getRunInfo().then(res => {
        if (res.status === 0) {
          this.mode = res.info[0].mode
          this.noList = Object.assign(this.noList, res.info[0])
        }
      })
    },
    modeChange (mode) {
      this.mode = mode
      switchRunMode({ mode: mode }).then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t(res.msg))
          this.listData()
        }
      })
    },
    switchChange (param, state) {
      //当UDP不产生日志提示为“开”时：组播和广播选项置灰（状态需要显示为ON）， 无法开启关闭
      if (param === "no_udp" && state) {
        this.noList.no_multicast = true;
        this.noList.no_broadcast = true;
        const reqList = ["no_multicast", "no_broadcast"];
        for (const item of reqList) {
          switchOpStatus({ param: item, state: "enable" });
        }
      }
      switchOpStatus({ param: param, state: state ? 'enable' : 'disable' }).then(res => {
        if (res.status === 0) {
          this.$message({
            message: this.$t(res.msg),
            type: 'success'
          })
        }
      })
    },
    analysisChange (data) {
      setStatus({ status: data }).then(res => {
        this.$messages.success(this.$t(res.msg))
      })
    },
    // 开启自学习时打开配置
    assistChange (data) {
      if (data === 'ON') {
        this.learnConfigDialogVisible = true
        this.$nextTick(() => {
          this.$refs.refLearnConfigDialogVisible.init('enable')
        })
      } else {
        this.learnConfigChange()
      }
    },
    learnConfigChange () {
      setLearnConfig(({ status: 'disable' })).then(res => {
        this.$messages.success(this.$t(res.msg))
      })
    },
    statusDisable () {
      this.noList.assist_status = this.noList.assist_status === 'OFF' ? 'ON' : 'OFF'
    }
  }
}
</script>
<style lang="less" scoped>
.run-mode-all {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.run-mode-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.run-card {
  width: 300px;
  height: 150px;
  margin: 20px;
  cursor: pointer;
  border-radius: 10px;
}

.run-card:active {
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.12) inset;
}

.runClick {
  background-color: #99ccff;
  color: #fff;
  border: 0;
}

.run-header {
  font-size: 20px;
  font-weight: 600;
}

.run-down-card {
  width: 400px;
}

.run-down-header {
  font-size: 18px;
}

.run-down-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text-switch {
  display: inline-flex;
  line-height: 30px;
}

.testMode {
  .el-switch {
    margin-right: -1px;
  }
}
</style>
